<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,">
    <meta charset="UTF-8">
    <title>自适应小案例</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{

        }
        li{
            width:250px;
            list-style:none;
        }
        @media screen and (min-width: 1000px) {
            ul {
                column-count: 5;
            }
        }
        @media screen and (min-width: 640px) and (max-width: 999px) {
             ul{
                 column-count: 3;
             }
        }
        @media screen and (max-width: 639px) {
        ul{
            column-count: 2;
        }
        }
    </style>
</head>
<body>
<ul>
    <li><img src="images/page1-img1.jpg" alt=""></li>
    <li><img src="images/page1-img2.jpg" alt=""></li>
    <li><img src="images/page1-img3.jpg" alt=""></li>
    <li><img src="images/page1-img4.jpg" alt=""></li>
    <li><img src="images/page2-img1.jpg" alt=""></li>
    <li><img src="images/page2-img2.jpg" alt=""></li>
    <li><img src="images/page2-img3.jpg" alt=""></li>
    <li><img src="images/page2-img4.jpg" alt=""></li>
    <li><img src="images/page2-img5.jpg" alt=""></li>
    <li><img src="images/page2-img6.jpg" alt=""></li>
    <li><img src="images/page2-img7.jpg" alt=""></li>
    <li><img src="images/page2-img8.jpg" alt=""></li>
    <li><img src="images/page2-img9.jpg" alt=""></li>
    <li><img src="images/page3-img1.jpg" alt=""></li>
    <li><img src="images/page3-img2.jpg" alt=""></li>
    <li><img src="images/page3-img3.jpg" alt=""></li>
</ul>
</body>
</html>